<template>
    <bi-tab>
        <bi-form label-width="80" >
            <bi-tab-item label="海报">
                <bi-list v-slot="{index}" :data="form.list" @add="addImage" @del="delImage" >
                    <bi-form-item label="图片">
                        <bi-file image v-model="form.list[index].image" preview-width="200" preview-height="130"  ></bi-file>
                    </bi-form-item>
                    <bi-form-item label="链接">
                        
                        <input-link v-model="form.list[index].url" ></input-link>
                    </bi-form-item>
                </bi-list>
            </bi-tab-item>
            <bi-tab-item label="指示点">
                <bi-form-item label="显示指示点">
                    <bi-radio v-model="form.indicatorDots" :option="autoOption" ></bi-radio>
                </bi-form-item>
                <bi-form-item label="指示点颜色">
                    <bi-input v-model="form.indicatorColor" >
                        <template #after>
                            <input type="color" v-model="form.indicatorColor" style="width: 30px; height: 30px; border:none;" />
                        </template>
                    </bi-input>
                </bi-form-item>
                <bi-form-item label="选中颜色">
                    <bi-input v-model="form.indicatorActiveColor" >
                        <template #after>
                            <input type="color" v-model="form.indicatorActiveColor" style="width: 30px; height: 30px; border:none;" />
                        </template>
                    </bi-input>
                </bi-form-item>
            </bi-tab-item>
            <bi-tab-item label="设置">
                
                <bi-form-item label="图片模式">
                    <image-mode v-model="form.imageMode" ></image-mode>
                </bi-form-item>
                <bi-form-item label="滚动方向">
                    <bi-radio v-model="form.dir" :option="dirOption" ></bi-radio>
                </bi-form-item>
                <bi-form-item label="自动播放">
                    <bi-radio v-model="form.autoplay" :option="autoOption" ></bi-radio>
                </bi-form-item>

                <bi-form-item label="图片高度">
                    <input-size v-model="form.height" :percent="false" ></input-size>
                </bi-form-item>
                <bi-form-item label="圆角">
                    <input-size v-model="form.radius" ></input-size>
                </bi-form-item>
            </bi-tab-item>
        </bi-form>
    </bi-tab>
</template>

<script>
import editorMixin from '../../editorMixin.js';
import imageMode from '../../field/image-mode.vue';
import inputSize from '../../field/input-size.vue';
import inputLink from '../../field/input-link.vue';
import defaultConfig from './defaultConfig.js';
export default{
    mixins:[editorMixin],
    components:{
        imageMode,
        inputSize,
        inputLink
    },
    data(){

        let form = JSON.parse(JSON.stringify(defaultConfig));
        
        let dirOption = [
            {label:'水平',value:'horizontal'},
            {label:'垂直',value:'vertical'}
        ]

        let autoOption = [
            {label:'是',value:true},
            {label:'否',value:false}
        ]

         
        return {
            form,
            dirOption,
            autoOption
        }
    },
    methods:{
        addImage(){
            this.form.list.push({image:'',url:''});
        },
        delImage(index){
            this.form.list.splice(index,1);
        }
    }

}
</script>